@import "variables";

/* Container 容器组件 */
.h-container {
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  box-sizing: border-box;
  min-width: 0;

  &.is--fluid {
    width: 100%;
    height: 100%;
  }

  &.is--gutter {
    padding: $tech-container-gutter;
  }

  &.is--vertical {
    flex-direction: column;
  }

  &.is--justify-center {
    justify-content: center;
  }

  &.is--justify-start {
    justify-content: flex-start;
  }

  &.is--justify-end {
    justify-content: flex-end;
  }

  &.is--justify-between {
    justify-content: space-between;
  }

  &.is--justify-around {
    justify-content: space-around;
  }
}

.h-header {
  flex-shrink: 0;
  box-sizing: border-box;
  background-color: $tech-container-background;

  &.is--gutter {
    padding: $tech-container-gutter;
  }

  &.is--separate {
    margin-bottom: $tech-container-separate;
  }

  &.is--border {
    border-bottom: 1px solid #EEEEEE;
  }

  &[class*="is--justify-"] {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  &.is--justify-center {
    justify-content: center;
  }

  &.is--justify-start {
    justify-content: flex-start;
  }

  &.is--justify-end {
    justify-content: flex-end;
  }

  &.is--justify-between {
    justify-content: space-between;
  }

  &.is--justify-around {
    justify-content: space-around;
  }

  .el-form--inline > .el-form-item {
    margin-bottom: 0;
  }
}

.h-footer {
  flex-shrink: 0;
  box-sizing: border-box;
  background-color: $tech-container-background;

  &.is--gutter {
    padding: $tech-container-gutter;
  }

  &.is--separate {
    margin-top: $tech-container-separate;
  }

  &.is--border {
    border-top: 1px solid #EEEEEE;
  }

  &[class*="is--justify-"] {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  &.is--justify-center {
    justify-content: center;
  }

  &.is--justify-start {
    justify-content: flex-start;
  }

  &.is--justify-end {
    justify-content: flex-end;
  }

  &.is--justify-between {
    justify-content: space-between;
  }

  &.is--justify-around {
    justify-content: space-around;
  }
}

.h-aside {
  flex-shrink: 0;
  box-sizing: border-box;
  background-color: $tech-container-background;

  &.is--gutter {
    &:not(.is--scrollbar) {
      padding: $tech-container-gutter;
    }
  }

  &.is--scrollbar {
    &.is--gutter > .el-scrollbar > .h-scrollbar__wrap > .el-scrollbar__view {
      padding: $tech-container-gutter;
    }

    &:not(.is--gutter) > .el-scrollbar > .h-scrollbar__wrap > .el-scrollbar__view {
      padding-right: 10px;
    }
  }

  &.is--separate-left {
    margin-left: $tech-container-separate;
  }

  &.is--separate-right {
    margin-right: $tech-container-separate;
  }

  &[class*="is--justify-"] {
    display: flex;
    flex-direction: column;
  }

  &.is--justify-center {
    justify-content: center;
  }

  &.is--justify-start {
    justify-content: flex-start;
  }

  &.is--justify-end {
    justify-content: flex-end;
  }

  &.is--justify-between {
    justify-content: space-between;
  }

  &.is--justify-around {
    justify-content: space-around;
  }
}

.h-main {
  display: block;
  flex: 1;
  flex-basis: auto;
  height: 100%;
  box-sizing: border-box;
  background-color: $tech-container-background;
  overflow: auto;

  &.is--gutter {
    &:not(.is--scrollbar) {
      padding: $tech-container-gutter;
    }
  }

  &.is--scrollbar {
    &.is--gutter > .el-scrollbar > .h-scrollbar__wrap > .el-scrollbar__view {
      padding: $tech-container-gutter;
    }

    &:not(.is--gutter) > .el-scrollbar > .h-scrollbar__wrap > .el-scrollbar__view {
      padding-right: 10px;
    }
  }
}

.h-flex {
  display: flex;

  &.is--row {
    flex-direction: row;
  }

  &.is--column {
    flex-direction: column;
  }

  &.is--align-center {
    align-items: center;
  }

  &.is--align-start {
    align-items: flex-start;
  }

  &.is--align-end {
    align-items: flex-end;
  }

  &.is--justify-center {
    justify-content: center;
  }

  &.is--justify-start {
    justify-content: flex-start;
  }

  &.is--justify-end {
    justify-content: flex-end;
  }

  &.is--justify-between {
    justify-content: space-between;
  }

  &.is--justify-around {
    justify-content: space-around;
  }
}

/* Image 图片组件 */
.h-image {
  .h-image-error {
    width: 100%;
    height: 100%;
    object-fit: contain;
    vertical-align: middle;
  }
}

/* Editor 富文本编辑器组件 */
.h-tinymce-editor {
  textarea {
    display: none;
  }
}

/* Grid 数据表组件 */
.h-grid {
  font-size: $tech-font-size;

  .vxe-table--render-default {
    &:not([class*="size--"]) {
      font-size: $tech-font-size;

      .vxe-header--column {
        color:#303233;
        line-height: $tech-grid-column-line-height;
        padding: ($tech-grid-column-height - $tech-grid-column-line-height)/2 0;
      }

      .vxe-body--column {
        line-height: $tech-grid-column-line-height;
        padding: ($tech-grid-column-height - $tech-grid-column-line-height)/2 0;
      }
    }

    .vxe-table--header-wrapper {
      background-color: $tech-grid-header-background;
    }

    .vxe-body--row.row--hover {
      background-color: $tech-grid-row-hover-background;
    }
  }

  .vxe-pager.is--perfect .vxe-pager--num-btn:not(.is--disabled).is--active {
    background-color: $tech-color-primary;
  }

  .vxe-select-option.is--selected {
    color: $tech-color-primary;
  }

  .h-grid-toolbar {
    &:not(.--flex) {
      padding-bottom: 1em;
    }

    &.--flex {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .h-grid-toolbar-left, .h-grid-toolbar-right {
      padding-bottom: 1em;
    }

    .el-form--inline {
      .el-form-item {
        margin-bottom: 0;
      }
    }
  }
}

/* Modal 模态框组件 */
.h-modal {
  &.vxe-modal--wrapper {
    font-size: $tech-font-size;
  }

  .vxe-modal--header {
    background-color: unset;

    .h-modal--title {
      margin: .4rem 0;
    }

    .vxe-modal--close-btn {
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .vxe-modal--footer {
    border-top: 1px solid #ebeef5;
  }

  .vxe-modal--body {
    padding: 0;
  }
}

/* Upload 上传组件 */
.h-upload {
  .el-upload + .el-button {
    margin-left: 10px;
  }

  .h-upload-tip {
    margin-left: 1em;

    p {
      margin: 0;
    }
  }

  &.is-custom {
    .el-upload-list__item {
      &:focus {
        outline: unset;
      }

      &:hover .h-upload-list__item-status-label {
        display: none;
      }
    }

    .el-card__body {
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 1em;
    }

    .h-upload-list__item-thumbnail {
      display: inline-block;
      width: 3em;
      height: 3em;
      margin-right: 1em;
    }

    .h-upload-list__item-status {
      position: absolute;
      right: 1em;
    }

    .h-upload-list__item-progress {
      position: absolute;
      width: auto;
      left: 5em;
      right: 1em;
      top: 50%;
      transform: translateY(1em);
    }

    .el-icon-close {
      top: 50%;
      transform: translateY(-50%);
      color: inherit;
      font-weight: bold;
    }
  }
}

/* Scrollbar 滚动条组件 */
.el-scrollbar {
  height: 100%;

  .h-scrollbar__wrap {
    overflow-x: hidden;
    margin-bottom: unset !important;
  }
}

/* Tabs 标签页组件 */
.el-tabs {
  display: flex;
  height: 100%;

  .el-tabs__content {
    height: 100%;

    .el-tab-pane {
      height: 100%;
    }
  }

  &.el-tabs--left, &.el-tabs--right {
    flex-direction: row;
  }

  &.el-tabs--top, &.el-tabs--bottom {
    flex-direction: column;
  }
}

